<template>
    <div>
        <!-- 页头 -->
        <van-nav-bar title="设置" class="item-navbar">
            <router-link to="/person" slot="left">
                <img src="http://qxkmdhmin.hn-bkt.clouddn.com/back.png">
            </router-link>
        </van-nav-bar>
        <router-link to="/personinfo">
            <van-row>
                <van-col span="6" class="item-col-img">
                    <van-image round width="4em" height="4em" :src="`${picture}`"/>
                </van-col>
                <van-col span="13" class="item-col-name">{{name}}</van-col>
                <van-col span="4" class="item-col-go">
                        <img src="">
                </van-col>
            </van-row>
        </router-link>
    </div>
</template>
<script>
export default {
    data(){
        return{
            name:'',
            picture:''
        }
    },
    mounted(){
        this.getdata();
    },
    methods:{
         getdata(){
            this.axios.get('/user/data?uid=1').then(result=>{
                // 获取数据库的用户名和用户图片  渲染到页面
                console.log(result.data.results[0]);
                this.name = result.data.results[0].uname;
                this.picture = result.data.results[0].headimg;
                console.log(this.picture)
            })
        }
    },
}
</script>
<style lang="sass" scoped>
    .item-navbar
        // 页头和主体的距离
        margin-bottom: 15px
    .item-col-img
        margin-left: 5px
    .item-col-name
        // 文字居中显示
        line-height: 80px
        font-size: 20px
        color: black
    .item-col-go
        // 前进箭头居中显示
        line-height: 80px
        
</style>